.<template>
  <div>
    <div class="wrapper">
      <van-nav-bar class="header" color="#333" title="月结支付安全性核验">
        <template #right>
          <van-icon @click="onBack" color="#333" name="wap-home-o" />
        </template>
      </van-nav-bar>
      <div class="main">
        <div style="padding: 12px;">
          根据贵公司设置，使用月结支付需要核验。系统已将短信验证码发送至当前预订人手机号“{{
            state.phone
          }}”请注意查收。
        </div>
        <div style="padding: 12px;">
          请输入验证码完成核验
        </div>
        <div style="position: relative">
          <van-field
            maxlength="8"
            v-model="state.code"
            placeholder="请输入短信验证码"
          />
          <div
            @click="sendMonthPayCode"
            style="position: absolute;right: 24px;top: 12px;color: #208CFF"
            v-if="state.textS <= 0"
          >
            重新获取验证码
          </div>
          <div
            style="position: absolute;right: 24px;top: 12px;color: #E65133"
            v-else
          >
            {{ state.textS }}s
          </div>
        </div>
        <div class="button" @click="checkMonthPayCode">
          完成支付
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";
import { Toast } from "vant";

const emit = defineEmits(["checkCodeSuccess", "onBack"]);
const { proxy } = getCurrentInstance();

const state = reactive({
  code: "",
  over_time: 0,
  textS: 60,
  phone: "",
  timeLet: null
});

onMounted(() => {
  state.phone = localStorage.getItem("LoginUserPhone");
  searchMonthPayCode();
});

const searchMonthPayCode = async () => {
  const data = {
    member_id: localStorage.getItem("memberId"),
    phone: state.phone
  };
  let res = await proxy.$axiosJson(
    "/security/v1/common/searchMonthPayCode",
    data
  );
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    if (!res.data.send_time) {
      sendMonthPayCode();
    } else {
      state.over_time = res.data.send_time + 60000;
      daoJishi();
    }
  }
};

const sendMonthPayCode = async () => {
  const data = {
    member_id: localStorage.getItem("memberId"),
    phone: state.phone
  };
  let res = await proxy.$axiosJson(
    "/security/v1/common/sendMonthPayCode",
    data
  );
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    state.over_time = res.data.send_time + 60000;
    daoJishi();
  }
};

const daoJishi = () => {
  clearInterval(state.timeLet);
  if (state.over_time) {
    state.timeLet = setInterval(() => {
      state.textS = Math.floor((state.over_time - new Date().getTime()) / 1000);
      if (state.textS <= 0) {
        clearInterval(state.timeLet);
      }
    }, 1000);
  }
};

const checkMonthPayCode = async () => {
  if (!state.code || state.code.length === 0) {
    Toast("请输入验证码");
    return false;
  }
  const data = {
    member_id: localStorage.getItem("memberId"),
    phone: state.phone,
    code: state.code
  };
  let res = await proxy.$axiosJson(
    "/security/v1/common/checkMonthPayCode",
    data
  );
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    if (res.data.check_status) {
      emit("checkCodeSuccess", true);
      // @ts-ignore
      // this.$parent.yueJie(true);
    } else {
      Toast(res.data.fail_reason);
    }
  }
};

const onBack = () => {
  emit("onBack");
};
</script>

<style scoped lang="less">
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: #fff;
  .main {
    margin-top: 46px;
    font-size: 13px;
    color: #666666;
  }
  .button {
    margin: 24px auto 0;
    width: 345px;
    height: 43px;
    background: linear-gradient(90deg, #208cff 0%, #046cfe 100%);
    border-radius: 7px;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    line-height: 42px;
  }
}
</style>
